<template>
  <div class="mt10">
    <div class="clearfix">
      <span class="mr10">达摩盘_平台精选</span>
      <span class="s_fc_9 mr10" style="max-width: 76%;" title="达摩盘定向 基于达摩盘自定义组合圈定的各类人群 。">达摩盘定向 基于达摩盘自定义组合圈定的各类人群 。</span>
      <el-button @click="dharmaShowModal" type="text">设置定向</el-button>
      <div class="popup">
        <el-dialog
          title="达摩盘_平台精选"
          :visible.sync="dharmaDialog"
          :close-on-click-modal="false"
          width="998px">
          <div style="height:auto; padding:0 20px 15px;" class="slotContent">
            <div class="searchBox" style="padding-left:0px;">
              <el-input v-model="dmp_crowd_name" style="height:32px;width:200px" prefix-icon="el-icon-search" placeholder="人群名称"></el-input>
            </div>
            <div class="dharma-table-box">
                <div class="empty" v-show="dharmaList.length<=0">
                   暂无数据
                </div>
                 <table class="dharma-table" v-show="dharmaList.length>0">
                    <tr>
                        <th width="5%" style="text-align:center">
                          <!-- <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll"  ></el-checkbox>  -->
                          <!-- @change="handleCheckAllChange" -->
                        </th>
                        <th width="40%">
                          人群名称
                        </th>
                        <th>
                          全网人群数量
                        </th>
                        <th>
                          初次同步时间
                        </th>
                    </tr>
                    <tr v-for="element in dharmaList" class="hover">
                        <td width="5%" style="text-align:center">
                          <el-checkbox  v-model="element.checked" :disabled="checkMaxNum>=8 && element.checked==false " @change="handleCheckChange" ></el-checkbox>
                        </td>
                        <td>
                          {{ element.dmp_crowd_name }}
                        </td>
                        <td>
                          {{ element.coverage }}
                        </td>
                        <td>
                          {{ element.enable_time.substring(0,10) }}
                        </td>
                    </tr>
                </table>
            </div>
             <div id="pages" v-show="total_count>0" class="pagination clearfix">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="[10, 20, ,30,40,50]"
                  :background="true"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total_count">
                </el-pagination>
              </div>
          </div>
          <span slot="footer" class="dialog-footer slotFooter">
            <a href="javascript:;" class="warning" v-show="warning6">
              <i class="el-icon-warning"></i>
              请至少选择一个定向标签
            </a>
            <el-button @click="dharmaCancel" size="small">取 消</el-button>
            <el-button type="primary" @click="dharmaConfirm"  size="small">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>
<style src="./style.styl" scoped lang="stylus"></style>
<script>
  export default {
    props:{
      value:''
    },
    data() {
      return {
        dharmaDialog: false,
        warning6: false,
        Tip:'',
        dharmaList: [],
        dharmaListOld:[],
        source:null,
        loading:false,
        dmp_crowd_name:'',
        checkAll:false,
        checkedHdarma:[],
        isIndeterminate:false,
        currentPage:1,
        currentPageSize:10,
        total_count:0,
        checkMaxNum:0
      }
    },
    mounted(){
      this.checkAll=false;
      this.searchDharma();
    },
    watch:{
      value(val){
         this.dharmaList.forEach(element=>{
              if(val.findIndex(value =>{return  element.dmp_crowd_id==value.dmp_crowd_id})!=-1){
                  element.checked=true;
              }else{
                  element.checked=false;
              }

        });
        this.handleCheckChange();
      },
      checkAll(val){
         if(val){
             this.dharmaList.forEach(element=>{
                   element.checked=true;
             })
         }else{
            this.dharmaList.forEach(element=>{
                   element.checked=false;
             })
         }
      },
      dmp_crowd_name(val){
        this.searchDharma();
      }
    },
    methods: {
      dharmaShowModal() {//行业店铺定向
          this.dharmaDialog = true;
          this.warning6 = false;
      },
      searchDharma(page,pageSize) {//搜索行业店铺标签 
           let _this=this;
           let page_num=page || 1;
           let page_size=pageSize || 10;
           if(typeof this.source=="function"){
              this.source();
           }
           this.$http({
              method: 'get',
              url: '/zuanzhan/crowd/dmp',
              params: {
                   page_num:page_num,
                   page_size:page_size,
                   dmp_crowd_name:this.dmp_crowd_name
              },
              cancelToken: new this.$http.CancelToken(c=>{
                this.source = c;
              })
            }).then((data) => {
//              this.loading=false;
              let list= data.data.data.list;
              // for(let i=0;i< data.data.data.length;i++){
              //     list.push({
              //       "coverage": 34222,
              //       "enable_time": "2017-01-01 00:00:00",
              //       "dmp_crowd_name": "自定义人群",
              //       "dmp_crowd_id": 123+i,
              //       "update_time": "2017-01-01 00:00:00",
              //       checked:false
              //     });
              // }
              // data={
              //     "list": list,
              //     "total_count": 50
              // }
              list.forEach(element=>{
                  element['checked']=false;
                  this.dharmaList.push(Object.assign({},element));
                  this.dharmaListOld.push(Object.assign({},element))
              });
              this.total_count = data.data.data.total_count;
            })
            .catch(function (error) {
//              this.loading=false;
            });
      },
      handleCheckChange(val){
             this.checkMaxNum=0;
             this.dharmaList.forEach(element=>{
                  if(element.checked){
                    this.checkMaxNum++;
                  }
             });
            // let all=true,noAll=true;
            // this.dharmaList.forEach(element=>{
            //      if(element.checked){
            //        noAll=false;
            //      }else{
            //        all=false;
            //      }
            // });
            // if(!all && !noAll){
            //   this.isIndeterminate=true;
            // }
            // if(all && !noAll){
            //   this.isIndeterminate=false;
            //   this.checkAll=true;
            // }
            // if(!all && noAll){
            //   this.isIndeterminate=false;
            //   this.checkAll=false;
            // }
      },
      handleCurrentChange(val){
         this.currentPage=val;
         this.searchDharma(val,this.currentPageSize);
      },
      handleSizeChange(val){
          this.currentPage=1;
          this.currentPageSize=val;
          this.searchDharma(this.currentPage,val);
      },
      dharmaConfirm() {//行业店铺定向的确认
          let list=[];
          this.dharmaListOld=[];
          this.dharmaList.forEach(element=>{
             if(element.checked){
                element['matrix_price']={};
                list.push(element)
             }
             this.dharmaListOld.push(Object.assign({},element));
          });
          if(list.length<=0){
            this.warning6=true;
            return;
          }
          this.checkMaxNum=0;
          this.$emit("input",list);//传给父组件
          this.dharmaDialog = false;
      },
      dharmaCancel(){
        this.dharmaList=this.dharmaListOld;
        this.checkMaxNum=0;
        this.dharmaDialog=false;
      }
    }
  }
</script>
